<template>
  <div>
    <vueWangeditor ref="editor" id="editor" style="height:320px" height="300" width="100%" v-model="content" />
    <el-button @click="getContent" type="primary">获取</el-button>
    <el-button @click="setContent" type="success">设置</el-button>
  </div>
</template>

<script>
// 导入vue-wangeditor
import vueWangeditor from "vue-wangeditor";
export default {
  // 注册组件
  components: { vueWangeditor },
  data() {
    return {
      content: `
                <div>
                    <h1>商品介绍</h1>
                </div>
            `
    };
  },
  methods: {
    //   获取富文本编辑器中的内容
    getContent() {
        const content=this.$refs.editor.getHtml();
        this.$success(content);
    },
    //   设置富文本编辑器的内容
    setContent() {
        const content=`
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
        `
        this.$refs.editor.setHtml(content);
    }
  }
};
</script>

<style>
</style>